<template>
  <div class="login">
    <div>
      <img src="../assets/logo.png" />
    </div>
    <div class="font-title">小明养殖</div>
    <div class="auto-alig">
      <el-input class="input" v-model="user.username" placeholder="请输入账号"></el-input>
    </div>
    <div class="auto-alig">
      <el-input class="input" v-model="user.password" placeholder="请输入密码" show-password></el-input>
    </div>
    <div class="buttons">
      <el-button type="primary" @click="login()">登录</el-button>
      <!-- <button @click="bus">按钮</button> -->
    </div>
    <div class="deng">
      <transition name="van-slide-right">
        <span class="span-left" @click="goZhuce">用户注册</span>
      </transition>
      <span class="span-right" @click="goPwd">修改密码</span>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import { post } from "../api/http";
export default {
  // name:'login',
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      token: "",
      message: "",
    };
  },
  methods: {
    goZhuce() {
      this.$router.push("/zhuce");
    },
    goPwd() {
      this.$router.push("/findpwd");
    },
    login() {
      // console.log(this.$store.state.token);
      // console.log(this.$store.getters.user); //vuex测试
      const param = {
        "users.account": this.user.username,
        "users.password": this.user.password,
      };
      post("/clien/login", param)
        .then((res) => {
          this.$store.commit("setUser", res.data.datas.user);
          const { token } = res.data;
          window.localStorage.setItem("jwtToken", token);
          //解析token
          // const decode = jwt_decode(token);
          // console.log(decode);
          //更改status状态
          // this.$store.dispatch("setIsAutnenticated", !this.isEmpty(decode));
          // this.$store.dispatch("setUser", decode);
          //判读是否获取成功就返回数据
          if (res.data.code === 200) {
            console.log(res);
          }
          console.log(res);
          //判断用户账号密码是否正确
          if (this.user.username !== "") {
            this.$alert(res.data.message);
          } else if (this.user.password === "") {
            this.$alert(res.data.message);
          }
          if (res.data.success === false) {
            this.$alert(res.data.message);
          } else {
            this.$alert("登录成功");
            this.$router.push({ path: "/index" });
            this.token = res.data.token;
            console.log(this.token);
            this.$store.dispatch("userToken", this.token);
          }
        })
        .catch((err) => {
          console.error(err);
        });

      // let loginParams = {
      //   "user.username": this.user.username,
      //   "user.password": this.user.password
      // };
      // getLogin(loginParams).then(res => {
      //   console.log(res.data);
      //   if (this.user.username == "") {
      //     this.$alert(res.data.message);
      //   } else if (this.user.password == "") {
      //     this.$alert(res.data.message);
      //   } else if (res.data.success == false) {
      //     this.$alert(res.data.message);
      //   } else {
      //     this.$router.push({ path: "/index" });
      //     this.token = res.data.token;
      //     console.log(this.token);
      //   }
      // });
    },
    isEmpty(value) {
      return (
        value === undefined ||
        value === null ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (typeof value === "string" && value.trim().length === 0)
      );
    },
  },
  created() {},
  mounted() {},
};
</script>


<style scoped>
.font-title {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.auto-alig {
  width: 13rem;
  text-align: center;
  margin: 10px auto;
}
.deng {
  margin-top: 35%;
}
.span-left {
  margin-right: 2rem;
}
.span-right {
  margin-left: 2rem;
}
.el-message-box {
  width: 18rem;
}
.el-input__inner {
  -webkit-appearance: none;
  background-color: #c8bfbf00;
  background-image: none;
  border: none;
  border-bottom: 1px solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 46px;
  line-height: 20px;
  outline: 0;
  padding: 0px 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
</style>
